<template>
	<view>
		<view class="status_bar">

		</view>
		<view class="navigation">
			<view class="folding"></view>
			
			<!-- <uni-search-bar radius="20" class="search" placeholder="Intro...宋冬野" bgColor="#EEEEEE" 
				clearButton="auto" cancelButton="none"  @click="search" :input-style="{ 'pointer-events': 'none' }"  /> -->
			<view class="search">
				<input :cursor="50" :selection-start="50" :disabled="true" type="text" class="sInput" placeholder="  🔍  Intro...宋冬野 " @click="search" />
			</view>
			<view class="vocal"></view>
		</view>
		<scroll-view class="content" :scroll-y="true" :show-scrollbar="false">
			<view class="hello">
				<span>中午好</span>
				<view class="hello-right">
					<view class="hello-tipC">

						<i class="iconfont icon-yinleyanzou"></i>
						<!-- <i class="iconfont icon-ziyuan"></i> -->
						<span>
							￥0.06/天升SVIP享超清母带>
						</span>
					</view>
				</view>

			</view>

			<scroll-view :scroll-x="true" :show-scrollbar="false" class="cardList">
				<tCard v-for="(item,index) of topCardData" :key="index" :data="topCardData[index]" />
			</scroll-view>
			<view class="musicCardList">

				<view class="cardListTitle"> {{musicCardList[0].cardListTitle}}</view>

				<scroll-view class="cards" :scroll-x="true" :show-scrollbar="false">

					<lCard v-for="(it,i) of musicCardList[0].cards" :key="i" :data="it" />

				</scroll-view>

			</view>
			<view class="push">
				<carousel :data="carouselData" />
			</view>
			<view class="recent">
				<recentCard :data="recentData" />
			</view>

		</scroll-view>
		<player :data="playerData"  />





	</view>
</template>

<script setup>
	import {
		ref,
		
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import tCard from "@/comp/card"
	import lCard from "@/comp/lCard.vue"
	import carousel from "@/comp/carousel.vue"
	import recentCard from "@/comp/recentCard.vue"
	import player from "@/comp/player.vue"
	
	import {musicList} from "@/store/music.js"
	
	
	let title = ref("hello")
	let isFocus = ref(false)
	
	let topCardData = ref([{
			title: "每日推荐",
			background: "http://p1.music.126.net/ZtQOTgvhqrcWYapiPj9NWQ==/19018252626210242.jpg?param=140y140",
			descirption: "符合你口味的新鲜好歌"
		},
		{
			title: "私人漫游",
			background: "http://p1.music.126.net/c-u3kOlkVTUf4JdeDHDdEw==/109951163291871252.jpg?param=140y140",
			descirption: "多种听歌模式随心播放"
		},
		{
			title: "独家策划",
			background: "http://p1.music.126.net/ReRkyVpcqeKCzxTVUvENAg==/109951162857949886.jpg?param=140y140",
			descirption: "世界级古典钢琴曲音乐珍藏"
		}
	])
	let musicCardList = ref([{
		cardListTitle: "甄选歌单",
		cards: [{
				imgUrl: 'http://p2.music.126.net/Ak2mqnmim2sFjxKAYnRb-A==/109951163085080176.jpg?param=140y140',
				described: '游戏驾车必备BGM超燃电音PHONK',
				hear: '2595万'
			},
			{
				imgUrl: 'http://p2.music.126.net/ncstLVrP3IuzXIpXUlY2kA==/109951169019527336.jpg?param=140y140',
				described: '「粤语」人世间所有的相遇 都是久别重逢4413万',
				hear: '2595万'
			},
			{
				imgUrl: 'http://p1.music.126.net/3iKN1wCHQDlIjoMRM7o9sA==/109951169796446336.jpg?param=140y140',
				described: '香港电影中的50首经典歌曲 [追忆录]',
				hear: '2595万'
			},
			{
				imgUrl: 'http://p1.music.126.net/-4Ygb5Z9XfLOQFeldQlY2A==/1389782698058443.jpg?param=140y140',
				described: '适合努力学习英语时听的歌曲',
				hear: '2595万'
			},
			{
				imgUrl: 'http://p2.music.126.net/IT4aefi1vpg_zpi_4hG5cQ==/19152393044273353.jpg?param=140y140',
				described: '低低吟唱的 是心跳不止 无所替代 lalalalalalalal',
				hear: '2595万'
			}
		]
	}])
	let carouselData = ref({
		title: "摇滚 斑驳的青春",
		data: [
			[{
					img: 'http://p2.music.126.net/Mg3po5i6FcZ_lwAaOnj-rA==/109951169779063479.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "典藏版",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/ABq_jZDJDcTY-vIHoe6hUQ==/109951169770889971.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/AWq-jvUPBTh5lQTVM8hzRw==/109951169773765069.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				}
			],
			[{
					img: 'http://p2.music.126.net/Mg3po5i6FcZ_lwAaOnj-rA==/109951169779063479.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/ABq_jZDJDcTY-vIHoe6hUQ==/109951169770889971.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/AWq-jvUPBTh5lQTVM8hzRw==/109951169773765069.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "Hi-Res",
					tagType: "2"
				}
			]
		]
	})
	let recentData = ref({
		title: "最近常听",
		data: [
			{
					img: 'http://p4.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "典藏版",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/ABq_jZDJDcTY-vIHoe6hUQ==/109951169770889971.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/AWq-jvUPBTh5lQTVM8hzRw==/109951169773765069.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				}
			,
			{
					img: 'http://p2.music.126.net/Mg3po5i6FcZ_lwAaOnj-rA==/109951169779063479.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/ABq_jZDJDcTY-vIHoe6hUQ==/109951169770889971.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "超42%人收藏",
					tagType: "1"
				},
				{
					img: 'http://p2.music.126.net/AWq-jvUPBTh5lQTVM8hzRw==/109951169773765069.jpg?param=100y100',
					title: "送流水",
					describ: "声音碎片乐队",
					tag: "Hi-Res",
					tagType: "2"
				}
			
		]
	})
	let playerData=ref({
		img:"http://p4.music.126.net/pcYHpMkdC69VVvWiynNklA==/109951166952713766.jpg?param=100y100",
		text:"送流水(凤凰传奇 李健 群星合唱版 one two three)"
	})
	const search=(event)=>{
		console.log(event)
		uni.navigateTo({
			url:"/pages/search/search"
		})
		isFocus.value=false
	}
	//onload页面只加载一次
	// beforeCreate(() => {
	// 	getMusicApi().then(res=>{
	// 		// console.log(1111,res)
	// 		musicList.value=res.data.data
	// 	})
	// })
</script>

<style lang="scss" scoped>
	.navigation {
		height: 100rpx;
		display: flex;

		.folding {

			height: 100%;
			width: 10%;
			background-image: url(@/static/folding.png);
			background-size: 60% 60%;
			background-repeat: no-repeat;
			background-position: center center;
		}

		.search {
			width: 80%;
			// border-radius: 20px;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			.sInput{
				background-color: #EEEEEE;
				height: 75rpx;
				border-radius: 40rpx;
				width: 100%;
			}


		}

		.vocal {
			width: 15%;
			background-image: url(@/static/vocal_open.png);
			background-size: 45% 45%;
			background-repeat: no-repeat;
			background-position: center center;
		}
	}

	.content {
		height: calc(100vh - 100rpx - var(--status-bar-height));
		overflow-y: auto;
		/* 横向滚动 */
		-webkit-overflow-scrolling: touch;
		/* iOS滚动流畅性 */
		background-color: #F8F9FD;


		.hello {
			display: flex;
			justify-content: space-between;
			padding-top: 50rpx;
			padding-left: 30rpx;

			span {
				flex: 1;
				font-size: 45rpx;
				font-weight: 500;
			}

			.hello-right {
				flex: 2;
				text-align: right;
				padding-right: 50rpx;

				.hello-tipC {
					margin-top: 10rpx;
					display: inline-block;
					border-radius: 20px;
					text-align: left;
					height: 45rpx;
					line-height: 45rpx;
					width: 400rpx;
					overflow: hidden;
					/* 溢出部分隐藏 */
					text-overflow: ellipsis;
					/* 使用省略号代替溢出部分 */
					white-space: nowrap;
					/* 设置为正常的换行模式 */
					background-color: #EFE6E9;
					padding-left: 10rpx;
					padding-right: 10rpx;

					.iconfont {
						font-size: 25rpx;
						margin-right: 5rpx;
						display: inline-block;
					}

					span {
						font-size: 25rpx;
						display: inline-block;
					}

				}
			}

		}

		.cardList {
			// background-color: blanchedalmond;
			padding-top: 30rpx;
			padding-left: 25rpx;
			// padding-right: 10rpx;
			white-space: nowrap;
		}

		.push {
			padding-left: 25rpx;
		}

	}
	
	
</style>